<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>任务线</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="icon" href="images/12.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #eecdee;
        }
        #note {
            font-size: 24px;
            line-height: 30px;
            resize: none;
            white-space: pre-wrap; /* 允许换行 */
            word-wrap: break-word; /* 允许长单词换行 */
        }
        #outer {
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        #task_title {
            text-align: center;
            font-family: 华文行楷, sans-serif;
            font-size: 44px;
            color: #255bc4;
            padding-bottom: 22px;
            background-color: #eecdee;
            font-weight: bold;
            margin: 0;
        }

        .task_str {
            text-align: center;
            font-weight: bold;
            color: red;
            margin: 0;
            background-color: #eecdee;
            padding-bottom: 22px;
        }

        #LinkBar {
            position: fixed;
            left: 20px;
            top: 260px;
        }

        #LinkBar button {
            margin: 10px;
            border-radius: 10px;
        }

        .date_month {
            font-family: 黑体;
            font-weight: bold;
            cursor: pointer;
            margin-left: 20px;
        }


        #task_list ul{
            margin-left: 40px;
            margin-top: 20px;
            list-style: none;
            display: none;
            font-size: 22px;
            font-family:微软雅黑 ;
        }

        #task_list ul>li {
            border-bottom: 1px solid #ccc;
            vertical-align: middle;
            margin-top: 10px;
        }

        .my_go_index a {
            text-decoration: none;
            color: #7171ef;
        }

        #task_list {
            width: 70%;
            text-align: left;
            background-color: #eef0c1;
            padding: 20px;
            border-radius: 20px;
            position: relative;
        }

        #search_div {
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }


        #addMottoModal,#updateMottoModal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: fit-content;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 10px 10px 20px #474747;
            display: none;
            z-index: 9999;
        }

        #addMottoModal .modal-header,#updateMottoModal .modal-header {
            background-color: #eded63;
            color: #121af1;
            font-family: 微软雅黑;
        }

        #addMottoModal .modal-body,#updateMottoModal .modal-body {
            padding: 20px;
        }

        #addMottoModal .modal-footer,#updateMottoModal .modal-footer {
            padding: 10px;
            text-align: center;
        }

        #addMottoModal input[type="text"],#updateMottoModal input[type="text"] {
            width: 100%;
            height: 40px;
            padding: 10px;
            margin-bottom: 20px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-family: 微软雅黑;
        }

        #addMottoModal button[type="submit"], #addMottoModal button[type="button"],
        #updateMottoModal button[type="submit"], #updateMottoModal button[type="button"] {
            width: 100px;
            height: 40px;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-family: 微软雅黑;
            cursor: pointer;
        }
        .li_note{
            postion: relative;
            width: 90%;
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 溢出的文本用省略号显示 */
            white-space: nowrap; /* 文本不换行 */
        }

        .li_note span:nth-of-type(2){
            margin-left: 30px;
            color: black;
            font-size: 16px;
        }
        .update_note{
            position: absolute;
            right: 10px;
        }

        .show_id{display: none}
        .href{
            color: blue;
            cursor: pointer;
        }


        @media (max-width: 1023px) {   /* 小于1024px时 */
            #addMottoModal,#updateMottoModal {
                width: 80%;
            }

            #addMottoModal button[type="submit"],#updateMottoModal button[type="submit"] {
                margin-left: 20px;
            }

            #addMottoModal button[type="button"],#updateMottoModal button[type="button"] {
                margin-right: 20px;
            }


            #LinkBar {
                left: 80%;
                top: 210px;
            }

            #LinkBar .btn {
                margin: 5px;
                width: 80%;
                padding: 5px 20px 5px 10px;
                height: 50%;
                font-size: 14px;
            }

            #task_list {
                margin: 0px 10px 0px 20px;
                width: 90%;
            }


            .task_str {
                font-size: 12px;
            }

            #task_list ul {
                margin-left: 10px;
                font-size: 16px;
            }
            .li_note{
                width: 70%;
            }
            .date_month{
                font-size: 14px;
            }
        }


        @media (min-width: 1024px) {    /* 大于1024px时 */
            #task_list {
                margin: 0px auto;
            }
        }



    </style>
</head>
<body>
<%
    int uid = session.getAttribute("uid")==null?0:Integer.parseInt(session.getAttribute("uid").toString());
    if (uid == 0) {
        response.sendRedirect("login.jsp");
        return;
    }
%>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
                <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
                <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
                <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
                <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
                <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_parent" id="login_out"><% String uname = (String) session.getAttribute("uname");
                    String welcomeMessage = "欢迎,登录";
                    if (uname != null && !uname.isEmpty()) {
                        welcomeMessage = "欢迎," + uname + "[退出登录]";
                    }
                    out.print(welcomeMessage);
                %>
                </a></li>
                <li><a target="_parent" href="regist.jsp">注册</a></li>
                <li><a target="_parent" href="#">会员中心</a></li>
                <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>


<div id="outer">
        <h1 id="task_title">重要记事</h1>
        <h3 class="task_str">可以将重要的事情或者账号保存在这里，以便随时查看</h3>
        <div id="search_div">
            <div class="input-group">
                <input type="text" id="search_input" class="form-control"
                       placeholder="输入关键字可以查询具体的记事,支持模糊查询">
                <span class="input-group-btn">
                    <button class="btn btn-primary" id="search_btn" type="button">查找记事</button>
               </span>
            </div>
        </div>
        <hr>

        <div id="task_list">
<%--            从session中过去列表notes,同时获取所有分类note_classz列表，判断notes中的元素类别是否存在于note_classz中，如果存在
                则显示在当前的类别下，如果不存在，就新开一个列表显示。--%>
            <c:forEach items="${note_classz}" var="note_class">
                <h3 class="date_month">${note_class}</h3>
                <ul id="ul_${note_class}">
                    <c:forEach items="${notes}" var="note">
                        <c:if test="${note.notes_class == note_class}">
                            <li class="li_note" >
                                    <span class="show_id">${note.id}</span>
                                    <span class="taskName label label-warning">${note.note}</span>
                                    <span class="update_note"><a class="href" onclick="updateNote(`${note.id}`,`${note_class}`,`${note.note}`)"> 查看/更新 </a> |
                                        <a id="del${note.id}" class="href" onclick="delNote('${note.id}')"> 删除 </a></span>
                            </li>
                        </c:if>
                    </c:forEach>
                </ul>
            </c:forEach>
        </div>

</div>
<%--添加记事模块--%>
<div id="addMottoModal" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 style="text-align: center;" class="modal-title"> 添 加 记 事 </h4>
        </div>
        <div class="modal-body">
            <form id="addMottoForm" action="MottosServlet" method="post">
                <span style="font-size: 15px;font-weight: bold;">请输入记事分类 或选择 现有分类：</span>
                <select name="note_class" id="note_class">
                    <option value="请选择"> --请选择-- </option>
                    <c:forEach items="${note_classz}" var="note_class">
                        <option value="${note_class}">${note_class}</option>
                    </c:forEach>
                </select>
                <input type="text" id="in_note_class" name="in_note_class" class="form-control" placeholder="请输入新的记事分类">
                <div class="form-group">
                    <label for="note">记事内容</label>
                    <textarea id="note" cols="30" maxlength="200" class="form-control" name="motto"
                              placeholder="请输入你的记事" rows="10"></textarea>
                </div>
            </form>
            <div class="modal-footer">
                <button id="add_close" type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                <button id="add_submit" type="submit" class="btn btn-info">提交</button>
            </div>
        </div>
    </div>
</div>

<%--更新记事模块--%>
<div id="updateMottoModal" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 style="text-align: center;" class="modal-title"> 更 新 记 事 </h4>
        </div>
        <div class="modal-body">
            <form id="updateMottoForm" action="NoteServlet" method="post">
                <span style="font-size: 15px;font-weight: bold;">请输入记事分类 或选择 现有分类：</span>
                <select name="note_class" id="up_note_class">
                    <option value="请选择"> --请选择-- </option>
                    <c:forEach items="${note_classz}" var="note_class">
                        <option value="${note_class}">${note_class}</option>
                    </c:forEach>
                </select>
                <input type="text" id="up_in_note_class" name="in_note_class" class="form-control" placeholder="请输入新的记事分类">
                <div class="form-group">
                    <label for="note">记事内容</label>
                    <textarea id="up_note" cols="30" maxlength="200" class="form-control" name="motto"
                              placeholder="请输入你的记事" rows="10"></textarea>
                </div>
            </form>
            <div class="modal-footer">
                <button id="up_add_close" type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                <button id="up_submit" type="submit" class="btn btn-info">提交</button>
            </div>
        </div>
    </div>
</div>


<!-- 创建一个垂直按钮组，用于操作任务列表的展开和折叠 -->
<div id="LinkBar" class="btn-group-vertical btn-group-lg" role="group" aria-label="...">
    <!-- 用于展开所有任务列表的按钮 -->
    <button type="button" id="addMottoBtn" class="btn btn-danger">添加记事</button>
    <!-- 用于展开所有任务列表的按钮 -->
    <button type="button" id="all_expand" class="btn btn-info">全部展开</button>
    <!-- 用于折叠所有任务列表的按钮 -->
    <button type="button" id="all_collapse" class="btn btn-success">全部折起</button>
    <hr>
    <button type="button" id="to_top" class="btn btn-primary">回到顶部</button>
    <button type="button" id="to_bottom" class="btn btn-warning">跳到底部</button>
</div>

<footer style="background-color: #eecdee; margin-top: 50px;" class="navbar-fixed-bottom  text-center"
        style="color: yellow; font-size: 14px">
    <!--                <a target="_blank" href="#">友情链接</a>-->
    <a target="_blank" href="https://beian.miit.gov.cn">京ICP备2024085356号</a>
    <!--                <a target="_blank" href="#">联网许可</a>-->
</footer>


</body>
<script>

    <%--    判断是否打开所有任务列表 ----%>
    let is_open = sessionStorage.getItem("isOpen");
    if (is_open == "true") {
        $("li").show();
        $(".year_div").slideDown(0,function (){});
        $(".date_month+ul").slideDown(0,function (){});
    }else if (is_open == "false") {
        $("li").show();
        $(".year_div").slideUp(0,function (){});
        $(".date_month+ul").slideUp(0,function (){});
    }

    // 点击任务名称，复制当前记事的内容到剪贴板
    $(".taskName").click(function () {
        let note = $(this).text();// 获取当前元素的文本内容
        let input = document.createElement('input');// 创建一个新的输入框元素
        input.value = note;// 将选中的文本内容设置为输入框的值
        document.body.appendChild(input);// 将新创建的输入框添加到文档的body元素中
        input.select();   // 选择输入框中的文本

        // 使用document.execCommand('copy')命令将选中的文本复制到剪贴板
        document.execCommand('copy');

        // 将临时创建的输入框从文档的body元素中移除，以保持DOM的整洁
        document.body.removeChild(input);

        alert("已复制到剪贴板！");   // 弹出提示信息
    });



    // 更新记事数据
    function updateNote(id, note_class, note) {
        $("#up_note_class").val(note_class);
        $("#up_note").val(note);
        $("#updateMottoModal").show(); // 显示更新格言模块



        $("#up_submit").click(function () {
            let up_note_class = $("#up_note_class").val();
            let up_in_note_class = $("#up_in_note_class").val();
            if (up_note_class == "请选择" && up_in_note_class == "") {
                alert("请选择记事分类，者输入新的分类！");
                return;
            }
            let up_note = $("#up_note").val();
            if (note ==up_note){
                alert("没有更改的内容,无需更新！");
                return;
            }
            if (up_note == "" || up_note==null){
                alert("请输入要更新的记事内容！");
                return;
            }
            $.ajax({
                url: "NoteServlet",
                type: "post",
                data: {"what": "update", "id": id, "note_class": up_note_class, "note": up_note},
                datatype: "text",
                success: function (data) {
                    if (data === "up_success") {
                        alert("更新成功!");
                        location.href="NoteServlet?what=query"
                    } else {
                        alert("更新失败!");
                    }
                },
                error: function () {
                    alert("更新失败!----异步请求错误！");
                }
            });
            $("#updateMottoModal").hide(); // 隐藏更新记事模块
        });
    }


    // 显示添加格言模块
    $("#addMottoBtn").click(function () {
        $("#addMottoModal").show();
    });

    // 隐藏添加格言模块
    $("#add_close").click(function () {
        $("#addMottoModal").hide();
        $("#motto").val("");
    });

    // 隐藏更新记事模块
    $("#up_add_close").click(function () {
        $("#updateMottoModal").hide();
        $("#up_note").val("");
    });

    // 添加按钮被点击
    $("#add_submit").click( function () {
        let note_class = $("#note_class").val();
        let in_note_class = $("#in_note_class").val();
        let is_new_class = false;
        if (note_class == "请选择" && in_note_class == "") {
            alert("请选择记事分类，者输入新的分类！");
            return;
        } else if (note_class == "请选择" && in_note_class != "") {
            note_class = in_note_class;
        }
        var note = $("#note").val()
        $.ajax({
            url: "NoteServlet",
            type: "post",
            data: {"what": "add", "note_class": note_class, "note": note},
            datatype: "json",
            success: function (note) {
                if (note) {
                    $("html,body").animate({scrollTop: 0}, 500);
                    location.href="NoteServlet?what=query";
                } else {
                    alert("添加失败!");
                }
            },
            error: function () {
               alert("添加失败!----异步请求错误！");
            }
        });
        $("#addMottoModal").hide(); // 隐藏添加记事模块
        $("#note_class").val("请选择");
        $("#note").val("");
    }); // 提交添加记事


    $("#task_list h3").click(function () {
        $(this).next("ul").slideToggle(500, function () {
        })
    });
    $(".date_year").click(function () {
        $(this).next(".year_div").slideToggle(300, function () {
        })
    });
    $("#all_expand").click(function () {
        $("li").show();
        $(".year_div").slideDown(500, function () {
        });
        $(".date_month+ul").slideDown(1000, function () {
        });
        sessionStorage.setItem("isOpen", "true");
    });
    $("#all_collapse").click(function () {
        $("li").show();
        $(".date_month+ul").slideUp(1000, function () {
        })
        $(".year_div").slideUp(1200, function () {
        });
        sessionStorage.setItem("isOpen", "false");
    });

    // 搜索数据的功能
    $("#search_btn").click(function () {
        let searchText = $("#search_input").val().trim();
        let isHaveResult = false;
        $(".taskName").each(function () {
            let taskName = $(this).text();
            //判断searchText是否在taskName中，如果在就显示出来，其他的隐藏起来。
            if (taskName.indexOf(searchText) == -1) {
                $(this).parent().hide();
            } else {
                isHaveResult = true;
                $(this).parent().show().parent().show();
            }
        });
        if (!isHaveResult) {
            alert("没有找到 ▶ "+searchText+" ◀ 相关记事");
        }
        $("#search_input").val("");
    });

    // 动态滚动文字效果
    // 初始化 mottos 变量为从服务器传输过来的 JSON 字符串
    <%--const mottos = <%= jsonMottos %>;--%>
    const scrollText = $('.scroll-text');
    // 当滚动开始时，显示文本并更新内容
    scrollText.each(function () {
        $(this).on('animationstart', function () {
            // 更新内容在动画开始时
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '1'); // 开始动画时显示文本
            $(this).css('left', '100%'); // 确保文本位置在右边
        });
        // 当滚动到最左边时，重新回到最右边开始滚动
        $(this).on('animationiteration', function () {
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '0'); // 重新定位后隐藏文本
        });
    });

    // 点击登录按钮退出登录，跳转到登录页面
    $("#login_out").click(function () {
        let b = confirm("确定退出当前账号的登录吗?");
        if (b) {
            //删除浏览器中的cookie信息
            document.cookie = "task_uid=;expires=" + new Date(0).toUTCString();
            document.cookie = "task_uname=;expires=" + new Date(0).toUTCString();
            location.href = "login.jsp";
        }
    });

    $("#to_top").click(function () {
        $("html,body").animate({scrollTop: 0}, 500);
    });
    $("#to_bottom").click(function () {
        $("html,body").animate({scrollTop: $(document).height()}, 500);
    })

    // 删除记事数据的操作
    function delNote(id) {
        let b = confirm("确定要删除吗?");
        if (!b) {
            return;
        }
        $.ajax({
            url: "NoteServlet",
            type: "post",
            data: {"what":"delete","id": id},
            datatype: "text",
            success: function (data) {
                if (data === "del_success") {
                    $("#del" + id).parent().parent().remove();
                    location.href="NoteServlet?what=query";
                }else{
                    alert("删除失败!");
                }
            },
            error: function () {
                alert("删除失败!----异步请求错误！");
            }
        });
    }


</script>
</html>
